/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity
} from 'react-native';
var {width,height} = require('Dimensions').get('window');
var TopBanner = React.createClass({
    getDefaultProps(){
      return {
          title:'',
          leftIcon:'',
          rightTitle:'',
          leftPress:null,
          rightPress:null,
          backgroundColor:'#08c8c1'
      }
    },
    render() {
        return (
            <View style={[styles.container,{backgroundColor:this.props.backgroundColor}]}>
                <TouchableOpacity style={styles.leftViewStyle} onPress={this.props.leftPress?this.props.leftPress:()=>{}}>
                    <Image source={{uri: this.props.leftIcon}} style={styles.navImageStyle}/>
                </TouchableOpacity>
                <Text style={{color:'#ffffff', fontSize:16, fontWeight:'bold'}}>{this.props.title}</Text>
                <TouchableOpacity onPress={this.props.rightPress?this.props.rightPress:()=>{}} style={styles.rightViewStyle}>
                    {/*<Image source={{uri: 'icon_shop_search'}} style={styles.navImageStyle}/>*/}
                    <Text  style={{color:'#ffffff', fontSize:15,fontWeight:'bold'}}>{this.props.rightTitle}</Text>
                </TouchableOpacity>
            </View>
        );
    }
});
const styles = StyleSheet.create({
    container: {
        height:63,
        paddingTop:15,
        // 设置主轴的方向
        flexDirection:'row',
        // 垂直居中 ---> 设置侧轴的对齐方式
        alignItems:'center',
        // 主轴方向居中
        justifyContent:'center'
    },
    navImageStyle:{
        width:10,
        height:21
    },
    leftViewStyle:{
        position:'absolute',
        left:10,
        bottom:12
    },
    rightViewStyle:{
        position:'absolute',
        right:10,
        bottom:16
    }
});
module.exports = TopBanner;